<template>
  <div id="app">
    <el-card shadow="always">
      <!--1. 定义条件查询-->
      <el-form :inline="true" :model="studentSearch" class="demo-form-inline" size="small">
        <el-form-item >
          <el-input v-model="studentSearch.sname" placeholder="学生姓名"/>
        </el-form-item>
        <el-form-item >
          <el-input v-model="studentSearch.addr" placeholder="学生住址"/>
        </el-form-item>
        <el-form-item >
          <el-select v-model="studentSearch.cid" placeholder="所在班级">
            <el-option label="所有班级" value="0"></el-option>
            <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addStudent">添加学生</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="handleDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
              :data="students"
              @selection-change="handleSelectionChange"
              style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="学号"
                prop="sid"
                align="center"
                width="180">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="sname"
                align="center">
        </el-table-column>
        <el-table-column
                label="性别"
                prop="sex"
                align="center">
        </el-table-column>
        <el-table-column
                label="年龄"
                prop="age"
                align="center">
        </el-table-column>
        <el-table-column
                label="所在班级"
                prop="cname"
                align="center">
        </el-table-column>
        <el-table-column
                label="地址"
                prop="addr"
                align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页导航-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>

      <!--1. 编辑学生的对话框-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        {{student}}
        <el-form :model="student" :rules="rules" ref="ruleForm" >
          <el-form-item label="学生姓名" :label-width="formLabelWidth" prop="sname">
            <el-input v-model="student.sname" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="学生性别" :label-width="formLabelWidth" prop="sex">
            <el-radio-group v-model="student.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="学生年龄" :label-width="formLabelWidth" prop="age">
            <el-input v-model.number="student.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学生住址" :label-width="formLabelWidth" prop="addr">
            <el-input v-model="student.addr" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="所在班级" :label-width="formLabelWidth" prop="cid">
            <el-select v-model="student.cid" placeholder="请选择所在班级">
              <el-option :label="c.cname" :value="c.cid" v-for="c in classes" :key="c.cid"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveStudent">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
  export default {
    data() {
      //1. 自定义年龄校验器
     let ageValidator = (rule,value,callback) =>{  // 参数1：校验规则 参数2：校验值 参数3：回调函数
        if(!value){
          callback(new Error('请输入年龄！'))
        }else if(!Number.isInteger(value)){
          callback(new Error('年龄必须是整数！'))
        }else if(value < 1 || value > 100){
          callback(new Error('年龄必须在1-100之间！'))
        }
        //此句不能省略
        callback()
      };
      return {
        students: [],       // 当前页的学生列表
        page:1,             // 当前页
        pageSize:5,         // 每页大小
        total: 100,         // 总记录数
        studentSearch:{},   // 查询的学生对象
        classes:[],         // 所有的班级列表
        dialogFormVisible:false,  // 对话框的显示与隐藏
        title:'添加学生',    // 对话框的标题
        student:{},         // 要添加或修改的学生对象
        formLabelWidth:'100px', // 对话框前面的文字的宽度
        multipleSelection: [],  // 复选框选择的学生
        sids:[],                // 代表要删除的学生id数组
        rules:{
          //1. 验证学生姓名
          sname:{
            required:true,message:'请输入用户名!',trigger:'blur'
          },
          //2. 验证学生性别
          sex:{
            required:true,message:'请选择性别!',trigger:'change'
          },
          //3. 验证学生年龄
          // age:{
          //   required:true,message:'请输入年龄!',trigger:'blur'
          // },
          // 自定义年龄校验器
          age:{
            validator:ageValidator,trigger:'blur'
          },
          //4. 验证学生住址
          addr:{
            required:true,message:'请输入住址!',trigger:'blur'
          },
          //5. 验证学生班级
          cid:{
            required:true,message:'请选择班级！',trigger:'change'
          }
        }
      }
    },
    created() {
      //1. 查询所有学生
      // this.findStudents()
      //2. 分页查询学生
      // this.findByPage()
      //3. 查询所有班级列表
      this.findClasses()
      //4. 条件查询带分页
      this.search()
    },
    methods: {
      // 复选框选中时执行
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },
      //1. 条件查询带分页
      search(){
        //1.1 将要查询的学生对象转换为json字符串
        this.$axios.post(`/student/search?page=${this.page}&pageSize=${this.pageSize}`,this.studentSearch).then(({data:resp}) => {
          this.students = resp.pr.rows
          this.total = resp.pr.total
        })
      },
      //2. 查询所有的班级列表
      findClasses(){
        this.$axios.get("/classes/list").then(({data}) => {
          console.log(data)
          this.classes = data.classes
        })
      },
      //3. 查询所有学生
      findStudents(){
        this.$axios.get("/student/list").then(({data:resp}) => {  // data: 异步回调后，后端送来的数据 resp，当前接受数据的变量
          console.log("data:",resp)
           this.students = resp.students
        })
      },
      //4. 分页学生
      findByPage(){
        this.$axios.get(`/student/findByPage?page=${this.page}&pageSize=${this.pageSize}`).then(({data:resp}) => {
          console.log("resp:",resp)
          this.students = resp.pr.rows
          this.total = resp.pr.total
        })
      },
      //5. pageSize大小发生改变时触发
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        // this.findByPage()
        this.search()
      },
      //6. 当前页大小改变时触发
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        // this.findByPage()
        this.search()
      },
      //7. 点击添加学生按钮
      addStudent(){
        //7.1 添空原来的数据
        this.student = {}
        //7.2 修改标题
        this.title = "添加学生"
        //7.3 打印对话框
        this.dialogFormVisible = true
      },
      //8. 修改学生按钮
      handleEdit( row) {
       //8.1 为当前的要修改的学生对象赋值
        this.student = row
        console.log(this.student)
        //8.2 修改对话框标题
        this.title = "修改学生"
        //8.3 打开对话框
        this.dialogFormVisible = true
      },
      //9. 保存学生
      saveStudent(){
        //9.1 定义添加或修改学生的url地址,区分是添加还是修改的操作，主要是看有没有sid字段的值
        let url = "/student/add"
        if(this.student.sid){
          url = "/student/update"
        }
        console.log("url:",url)
        //9.2 将学生对象转换为字符串
        // let stud = JSON.stringify(this.student)
        let _this = this
        this.$refs['ruleForm'].validate(valid => {      // 只有所有的字段校验通过，此字段才是true
          if(valid){    // 所有的数据验证后才向后台发送请求
            this.$axios.post(url ,this.student).then(resp => {
              if(resp.data.code === 0){                // 编辑成功 ===代表比较的是内容与类型是否都相等
                this.dialogFormVisible = false         // 关闭对话框
                // 下面显示信息框
                this.$message({
                  message: resp.data.msg,             // 信息框的提示信息
                  type: 'success',                    // 信息框的类型
                  onClose(){                          // 信息框关闭时执行的回调函数
                    _this.search()                    // 刷新页面
                  }
                });
              }
            })
          }
        })
      },
      //10. 删除学生 (单个或批量都可以)
      handleDelete(row) {
        let _this = this
        console.log("row:",row)
        this.sids = [];  // 这里将代表所有选中要删除的学号的数组清空.
        if(row.sid){    // 证明删除单个学生
          this.sids.push(row.sid)
        }else{      // 证明删除多个学生
          this.sids = this.multipleSelection.map(m => m.sid)
        }
        //显示确认框
        this.$confirm(`是否真的要删除学生编号为${this.sids}?`, '温馨提示', {
          confirmButtonText: '确定',    // 定义‘确定’按钮文本
          cancelButtonText: '取消',     // 定义'取消'按钮文本
          type: 'warning'              // 定义确认框类型
        }).then(() => {                // 代表点击了'确定'按钮后的代码
          //10.1 向后台发出删除学生的请求
          this.$axios.get(`/student/delete?sids=${this.sids}`).then(resp => {
            //10.2 当后端执行删除成功后，弹出消息提示框，关提示框关闭时，重新刷新页面
            if(resp.data.code === 0){
              this.$message({
                type: 'success',
                message: resp.data.msg,
                onClose(){                          // 当消息提示框关闭时执行其中的代码
                  _this.search()                    // 刷新页面
                }
              });
            }
          })
        }).catch(() => {  // 代表点击了'取消'按钮后的代码
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style>
  .el-card{
    width: 90%;
    margin:0 auto;
  }
  .el-pagination{
    text-align: right;
    margin-top: 20px;
  }
</style>
